<template>
  <s-modal
    title="预览"
    :visible="visible"
    width="800px"
    ok-text="获取表单值"
    :confirm-loading="confirmLoading"
    :closable="!confirmLoading"
    @ok="save()"
    @cancel="
      () => {
        if (!confirmLoading) {
          visible = false
        }
      }
    "
  >
    <div style="height: 400px">
      <s-scroll>
        <s-form ref="form" :value="fakeValue">
          <static-viewer :items="config" :form="fakeValue" />
        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
import { Modal } from 'ant-design-vue'
import StaticViewer from '@/components/extends/dynamicForm/index.vue'
export default {
  name: 'Preview',
  components: { StaticViewer },
  props: {
    config: {
      type: Array,
      default: undefined
    },
    renderData: {
      type: Object,
      default: undefined
    },
    formValue: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      fakeValue: this.formValue,
      confirmLoading: false,
      visible: false,
      formValueConfig: {}
    }
  },
  watch: {
    formValue(val) {
      this.fakeValue = val
    }
  },
  methods: {
    copyValue(val) {
      var input = document.createElement('input') // 创建input对象
      input.value = val // 设置复制内容
      document.body.appendChild(input) // 添加临时实例
      input.select() // 选择实例内容
      document.execCommand('Copy') // 执行复制
      document.body.removeChild(input) // 删除临时实例
      this.$message.info('复制成功')
    },
    open() {
      this.visible = true
    },
    save() {
      const form = this.$refs.form
      form.validate((values) => {
        const that = this
        Modal.confirm({
          title: '提示',
          content: JSON.stringify(values),
          okText: '复制',
          closable: true,
          onOk() {
            that.copyValue(JSON.stringify(values))
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
